<template>
    <!--<el-tooltip :content="props.tooltip" placement="right">-->
    <!--    <template #default>-->
    <!--        <RouterLink-->
    <!--            :to="props.to"-->
    <!--            class="my-router-link"-->
    <!--            active-class="active">-->
    <!--            <div class="nav-button">-->
    <!--                <slot></slot>-->
    <!--            </div>-->
    <!--        </RouterLink>-->
    <!--    </template>-->
    <!--</el-tooltip>-->
  <RouterLink
      :to="props.to"
      class="my-router-link"
      active-class="active">
    <div class="nav-button">
      <slot></slot>
    </div>
  </RouterLink>
</template>

<script setup lang="ts">
const props = defineProps<{
    to: string
    tooltip: string
}>()
</script>

<style lang="scss" scoped>
@use '/src/assets/scss/color.scss' as *;
.my-router-link {
    text-decoration-color: none;
    text-decoration: none;
    cursor: pointer;
    color: white;
    &.active {
        color: $c-orange-4;
    }
}

.nav-button {
    // padding: 5px;

    height: 40px;
    width: 100%;

    border-radius: 4px;

    display: flex;
    padding: 0px 5px;
    box-sizing: border-box;

    // color: $c-blue-0;
    // color:white;
    align-items: center;
    background-color: $c-gray-8;
    //justify-content: center;
  // padding-left:30px;
    text-decoration-color: none;
    &:hover {
        background-color: $c-gray-7;
    }
    i{
      margin-right:10px;
    }
    &:active {
        // color: $c-blue-0;
        text-decoration-color: none;
        text-decoration: none;
    }
}
</style>
